<template>
  <div class="countbox">
    <h3 class="box_title">{{tableTitle}}</h3>
      <div class="box_table">
        <el-table  :data="axis.axisY"  border >
          <el-table-column
            v-for=" (item ,index) in axis.axisX" 
            :prop="index+''"
            :label="item"
            align="center"
            :key="index" >
          </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "TempleCheck",
  props: {
    tableTitle: { type: String, default: "" },
    axisData: { type: Array, default: [] }
  },
  data() {
    return {
    };
  },
  computed: {
    axis:function(){
      let axisX = [];
      let axisY = [];
      let axisMap = {};
      this.axisData.forEach(function(val, index) {
        axisX.push(val.name);
        axisMap[index+''] = val.value == null || val.value == undefined ? 0 : val.value;
      });
      axisY.push(axisMap);
      return {'axisX':axisX ,'axisY':axisY}
    }
  }
};
</script>

<style lang="scss">
.countbox {
  padding: 20px;
}
.box_title {
  font-size: 18px;
  color: #555;
	font-weight: normal;
}
.box_table .el-table th,
.box_table .el-table td {
  font-size: 15px;
}
</style>
